<template>
  <div class="page-main">
    <!-- <searcher ref="searchForm" :form-items="items" @handleSearch="handleSearch" /> -->
    <page-tools>
      <el-button type="primary" @click="handleOpenDialog('new')">新建量表</el-button>
    </page-tools>
    <base-table ref="tableRef" :table-config="tableConfig" :table-columns="tableColumns" @handle-method="handleMethod">
      <template #tools="{ scope }">
        <el-button size="small" type="text" style="color: red" @click="handleDelete(scope.row.id)">删除</el-button>
        <el-button size="small" v-if="scope.row.isOnline" type="text" @click="handelUpdateOnline(false, scope.row)">下线</el-button>
        <el-button size="small" v-else type="text" @click="handelUpdateOnline(true, scope.row)">上线</el-button>
        <el-button size="small" type="text" @click="router.push({ path: '/scale/test/' + scope.row.id })">测试量表</el-button>
        <el-button size="small" type="text" @click="handleOpenDialog('edit', scope.row)">编辑</el-button>
        <!-- <el-button size="small" type="text" @click="handleOpenDialog('show', scope.row)">查看</el-button> -->
      </template>
    </base-table>
  </div>

  <Loger ref="companyLoger" :size="'small'" @submit="handleSubmit" @cancel="handelCancel">
    <Former ref="companyForm" :form-items="formItems" :form-config="formConfig" />
  </Loger>
</template>

<script lang="ts" setup>
  import { TableConfigType } from '@/components/common-table/common-table-type';
  import { reactive, ref, nextTick } from 'vue';
  import { scaleTableColumns } from '../utils/table-columns';
  import { scaleFormItems } from '../utils/form-items';
  import { BaseFormItem, FormConfigType } from '@/components/common-form/common-form-type';
  import { Http } from '@/utils/http';
  import Message from '@/utils/message';
  import { ElMessageBox } from 'element-plus';
  import { Scale } from '../utils/scale.type';
  import { useRouter } from 'vue-router';

  const router = useRouter();

  const module = 'scale';

  // 声明ref
  const tableRef = ref();
  const companyLoger = ref();
  const companyForm = ref();

  // 声明数据
  // 表格
  const tableConfig = reactive<TableConfigType>({
    url: `/${module}/list`,
    border: true,
    index: true,
    check: false,
    tools: true,
    toolsWidth: 240,
  });
  const tableColumns = ref(scaleTableColumns);
  // loger
  const logerType = ref<'new' | 'edit' | 'show'>('new');
  // former
  const formItems = ref(scaleFormItems);
  const formConfig = reactive<FormConfigType>({
    labelWidth: '100px',
  });

  // 弹框确定
  const handleSubmit = (cb: () => void) => {
    const formData = companyForm.value.getValue();
    // 如果返回的是formData
    if (formData) {
      // 根据 type 进行判断操作
      if (logerType.value === 'new') {
        Http.post(`/${module}/create`, formData).then(() => {
          Message.success('新建成功！');
          tableRef.value.initTableData();
          companyForm.value.reset();
          cb();
        });
      } else if (logerType.value === 'edit') {
        Http.post(`/${module}/update`, formData).then(() => {
          Message.success('更新成功！');
          tableRef.value.initTableData();
          companyForm.value.reset();
          cb();
        });
      } else {
        cb();
      }
    }
  };

  // 弹框取消
  const handelCancel = (cb: () => void) => {
    companyForm.value.reset();
    cb();
  };

  // 上下线
  const handelUpdateOnline = (val: boolean, row: Scale) => {
    row.isOnline = val;

    Http.post(`/${module}/update`, row).then(() => {
      Message.success('上线成功！');
      tableRef.value.initTableData();
    });
  };

  // 打开弹框
  const handleOpenDialog = (type: 'new' | 'edit' | 'show', row?: Scale) => {
    logerType.value = type;
    const title = (type === 'new' ? '新建' : type === 'edit' ? '编辑' : '查看') + '量表';
    if (type === 'new') {
      formItems.value.map((item: BaseFormItem) => {
        item.disabled = false;
      });
    } else if (type === 'edit') {
      formItems.value.map((item: BaseFormItem) => {
        item.disabled = !!item.noEdit;
      });
    } else {
      formItems.value.map((item: BaseFormItem) => {
        item.disabled = true;
      });
    }
    companyLoger.value.open(title);
    nextTick(() => {
      row && companyForm.value.setFormData(row);
    });
  };

  // 表格删除
  const handleDelete = (id: { id: number }) => {
    ElMessageBox.confirm('您确定要删除该量表吗？', '提示', { type: 'warning', confirmButtonText: '确定', cancelButtonText: '取消' })
      .then(() => {
        Http.post(`/${module}/delete`, { id }).then(() => {
          Message.success('删除成功！');
          tableRef.value.initTableData();
        });
      })
      .catch(() => {
        Message.info('您点击了取消');
      });
  };

  //
  const handleMethod = (cb: () => void) => cb();
</script>

<style lang="scss" scoped></style>
